
/*margin设置是顺时针*/
.box{
    border: solid #007aff 2px;
    margin: 50px 100px 20px 80px;
    padding: 10px;
    background: #ff2b1c;
    float: left;

}


.box1{
    border: solid #007aff 2px;
    /*外边剧*/
    margin: 20px;
    /*内边剧*/
    padding: 10px;
    background: #368018;
    height: 200px;
    width: 100px;
    /*浮动：设置浮动后，会脱离原来的文档流，下一个文档就会往上排，占据这个文档流，浮动起来的文件*/
    /*也会浮起来挨个排序展示，排满的话会自动到到一排开始排，所以页面的像素占比的调节会影响每行排列多少个文档*/

    /*如果所有的盒子都从父元素浮起来，那么就会脱离父元素展示*/
    /*如果父元素也浮动的话，那么子元素的box也还是会在父元素里面*/
    float: left;


}

.box2{
    border: solid #007aff 2px;
    /*外边剧*/
    margin: 20px;
    /*内边剧*/
    padding: 10px;
    background: #80107b;
    height: 200px;
    width: 100px;
    float: left;


}

.box3 {
    border: solid #007aff 2px;
    /*外边剧*/
    margin: 20px;
    /*内边剧*/
    padding: 10px;
    background: #535880;
    height: 200px;
    width: 100px;
    float: left;

}

.box10{
    border: solid #007aff 2px;
    background: #ff2b1c;
    padding: 20px;
    margin: 20px;
    width: 500px;
    /*position: absolute;*/
    /*left: 100px;*/
    /*top: 100px;*/


}

.box11{
    border: solid #007aff 2px;
    background: #368018;
    height: 200px;
    width: 100px;


}

.box22{
    border: solid #007aff 2px;
    background: #80107b;
    height: 200px;
    width: 100px;
    /*absolute 为绝对定位，要写具体定位的位置left和top，会从原来的文档流出来，不占位置*/
    /*position: absolute;*/

    /*!*relative 为相对定位，会占据原来文档流的位置，并且进行相对移位*!*/
    position: relative;

    /*fixed 为浏览器的固定定位，是定位在浏览器上，无论你怎么滑动，都定位在那里*/
    /*position: fixed;*/

    left: 100px;
    top: 100px;


}

.box33{
    border: solid #007aff 2px;
    background: #535880;
    height: 200px;
    width: 100px;

}





